<template>
  <div class="tiktok-write-off-record">
    <c-title text="核销记录"></c-title>
    <div class="box" v-for="item in list" :key="item.id">
      <div class="tips">
        <span class="tips-item">{{ item.type_name }}</span>
        <span class="number" v-if="item.type == 3">共{{ item.all }}次 剩余{{ item.left }}次</span>
      </div>
      <div class="title">{{ item.has_one_good && item.has_one_good.name }}</div>
      <div class="time">
        <span>{{ item.created_at }}</span>
        <span style="margin-left: 0.3125rem;">{{ item.code }}</span>
      </div>

      <img v-if="item.status==2" class="write-off"
        src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/dy-verification-certificate/revoked.png"
        alt="" />
      <img v-else class="write-off"
        src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/dy-verification-certificate/write-off.png"
        alt="" />
      <div class="buttons">
        <button v-clipboard:copy="item.code" v-clipboard:success="onCopy" v-clipboard:error="onError">复制劵码</button>
        <button class="ml-24" @click="goto(item)">详情</button>
      </div>

    </div>
  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin.js";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      isLoadMore: true,
      page: 1,
      total_page: 0,


    };
  },
  activated() {
    this.getData(1);
  },
  methods: {
    onCopy: function (e) {
      Toast({
        message: "复制成功",
        duration: 1000
      });
    },
    onError: function (e) {
      Toast({
        message: "复制失败",
        duration: 1000
      });
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },

    getData(page = 1) {
      $http.get("plugin.tiktok-verify-ticket.api.record.index", { page }, "").then(({ result, msg, data }) => {
        if (result !== 1) {
          return this.$toast(msg);
        }
        this.isLoadMore = true;
        this.page = data.current_page;
        this.total_page = data.last_page;
        if (page == 1) {
          this.list = data.data;
        } else {
          this.list = this.list.concat(data.data);
        }
      })
    },
    goto(item) {
      this.$router.push(this.fun.getUrl("tiktok_writeoff_record_detail",{},{id:item.id}));
    }
  }
};
</script>

<style scoped lang="scss">
.tiktok-write-off-record {
  padding: 0.625rem 0.75rem;

  .number {
    border-radius: 0 0 0.625rem 0;
    background-color: #FFF0E8;
    padding: 0.3438rem 0.3rem .3rem 1rem;
    color: #F96D20;
    font-size: 0.8125rem;
    margin-left: -.8rem;

  }

  .ml-24 {
    margin-left: 0.75rem;
  }

  .buttons {
    margin: 0.9063rem 0.7813rem 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 1px dotted #D6D6DC;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    button {
      width: 5rem;
      height: 2rem;
      border-radius: 1.375rem 1.375rem 1.375rem 1.375rem;
      opacity: 1;
      color: var(--themeBaseColor);
      border: 1px solid var(--themeBaseColor);
    }

  }

  .tips {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .tips-item {
    height:1.5rem;
    line-height:1.5rem;
    z-index: 2;
    border-radius: 0 0 0.625rem 0;
    background-color: #F96D20;
    padding: 0  0.5rem;
    color: #fff;
    font-size: 0.8125rem;
  }

  .time {
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
    color: #707070;
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }

  .title {
    width: 70%;
    margin-top: 0.625rem;
    color: #00001C;
    font-weight: bold;
    font-size: 1rem;
    margin-left: 0.75rem;
    text-align: left;
  }

  .write-off {
    width: 3.75rem;
    height: 3.2813rem;
    position: absolute;
    right: 0.6875rem;
    top: 0.9688rem;
  }

  .box {
    position: relative;
    margin-bottom: 0.625rem;
    border-radius: 0.625rem;
    overflow: hidden;
    background-color: #fff;
  }
}</style>
